import React, { Component } from 'react'
import { Switch, Route, NavLink } from 'react-router-dom'
import Header from '../../components/Header/Header'
import './Index.less'
import PrivateRoute from '../../utils/PrivateRoute'

import home_y from "../../assets/img/home_y.jpeg";
import home_n from "../../assets/img/home_n.jpeg";

import cate_y from "../../assets/img/cate_y.jpeg";
import cate_n from "../../assets/img/cate_n.jpeg";

import shop_y from "../../assets/img/shop_y.jpeg";
import shop_n from "../../assets/img/shop_n.jpeg";

import mine_y from "../../assets/img/mine_y.jpeg";
import mine_n from "../../assets/img/mine_n.jpeg";

import Home from '../Home/Home'
import Cate from '../Cate/Cate'
import Shop from '../Shop/Shop'
import Mine from '../Mine/Mine'

export default class Index extends Component {
  render() {
    let { location: { pathname } } = this.props;
    return (
      <div className='index'>
       
        {/* 二级视图 */}
        <Switch>
          {/* Home */}
          <Route path='/index/home' component={Home}></Route>
          {/* Cate */}
          <Route path='/index/cate' component={Cate}></Route>
          {/* Shop */}
          {/* 路由独享守卫 */}
          <PrivateRoute path='/index/shop' component={Shop}></PrivateRoute>
          {/* Mine */}
          <Route path='/index/mine' component={Mine}></Route>
        
        </Switch>

        {/* 底部导航 */}
        <footer className='footer'>
          <NavLink to='/index/home'>
            <img src={pathname == '/index/home' ? home_y : home_n} alt="" />
            <div>首页</div>
          </NavLink>

          <NavLink to='/index/cate'>
            <img src={pathname == '/index/cate' ? cate_y : cate_n} alt="" />
            <div>分类</div>
          </NavLink>

          <NavLink to='/index/shop'>
            <img src={pathname == '/index/shop' ? shop_y : shop_n} alt="" />
            <div>购物车</div>
          </NavLink>

          <NavLink to='/index/mine'>
            <img src={pathname == '/index/mine' ? mine_y : mine_n} alt="" />
            <div>我</div>
          </NavLink>
        </footer>
      </div>
    )
  }
}
